import { motion } from 'framer-motion';

export default function About() {
  return (
    <div className="space-y-12">
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <h1 className="text-[clamp(1.8rem,4vw,3rem)] font-bold text-blue-700 mb-4">关于我们</h1>
        <p className="text-gray-600 max-w-3xl">欢迎来到AI角色扮演平台，我们致力于为用户提供最优质的AI角色互动体验。</p>
      </motion.div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <motion.div 
          className="bg-white rounded-2xl shadow-lg p-8"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
        >
          <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-6">
            <i className="fa-solid fa-lightbulb text-blue-600 text-2xl"></i>
          </div>
          
          <h2 className="text-2xl font-bold text-gray-800 mb-4">我们的使命</h2>
          <p className="text-gray-600 mb-4">
            我们的使命是通过先进的AI技术，创造沉浸式的角色扮演体验，让用户能够与各种虚拟角色进行自然、流畅的对话。
          </p>
          <p className="text-gray-600">
            我们相信，AI不仅是工具，更是能够理解情感、产生共鸣的伙伴。通过我们的平台，用户可以探索无限的想象空间。
          </p>
        </motion.div>
        
        <motion.div 
          className="bg-white rounded-2xl shadow-lg p-8"
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-6">
            <i className="fa-solid fa-rocket text-blue-600 text-2xl"></i>
          </div>
          
          <h2 className="text-2xl font-bold text-gray-800 mb-4">我们的愿景</h2>
          <p className="text-gray-600 mb-4">
            我们致力于打造全球领先的AI角色扮演平台，不断提升AI的对话能力和情感理解能力，创造更加真实、丰富的虚拟角色世界。
          </p>
          <p className="text-gray-600">
            未来，我们将引入更多创新功能，包括多模态交互、个性化角色定制等，为用户带来更加丰富的体验。
          </p>
        </motion.div>
      </div>
      
      <motion.div 
        className="bg-white rounded-2xl shadow-lg p-8"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.3 }}
      >
        <h2 className="text-2xl font-bold text-gray-800 mb-6">联系我们</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <form className="space-y-4">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                <input 
                  type="text" 
                  id="name" 
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="您的姓名"
                />
              </div>
              
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                <input 
                  type="email" 
                  id="email" 
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="您的邮箱地址"
                />
              </div>
              
              <div>
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">留言</label>
                <textarea 
                  id="message" 
                  rows={4}
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入您的留言..."
                ></textarea>
              </div>
              
              <button 
                type="submit"
                className="w-full py-3 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition-colors"
              >
                发送留言
              </button>
            </form>
          </div>
          
          <div className="flex flex-col justify-between">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">联系方式</h3>
              
              <div className="space-y-4">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <i className="fa-solid fa-envelope text-blue-600"></i>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">邮箱</p>
                    <p className="text-gray-800">contact@airoleplay.com</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <i className="fa-solid fa-phone text-blue-600"></i>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">电话</p>
                    <p className="text-gray-800">+86 123 4567 8910</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <i className="fa-solid fa-map-marker-alt text-blue-600"></i>
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">地址</p>
                    <p className="text-gray-800">北京市海淀区科技园区88号AI大厦15层</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="mt-8">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">关注我们</h3>
              <div className="flex gap-4">
                <a href="#" className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-colors">
                  <i className="fa-brands fa-weixin text-xl"></i>
                </a>
                <a href="#" className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-colors">
                  <i className="fa-brands fa-weibo text-xl"></i>
                </a>
                <a href="#" className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-colors">
                  <i className="fa-brands fa-github text-xl"></i>
                </a>
                <a href="#" className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-colors">
                  <i className="fa-brands fa-twitter text-xl"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  );
}